<%@ page language="java" isErrorPage="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<script id="microloader" type="text/javascript" src="${pageContext.request.contextPath}/scripts/ext5/ext/build/ext-all.js"></script>
<script  type="text/javascript" src="${pageContext.request.contextPath}/scripts/ext5/ext/example/examples.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/ext5/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/home.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/ext5/ext/example/example.css" /><!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <title>Simple Map</title>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJMFfqtwBkbMPZH5f8MDmp6gfckwCMJo0&sensor=false"></script>
    <title>Hello, World</title>
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
    </style>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

//    alert()
    function Rad(d){
        return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
    }

    function GetDistance(lat1,lng1,lat2,lng2){

        var radLat1 = Rad(lat1);
        var radLat2 = Rad(lat2);
        var a = radLat1 - radLat2;
        var  b = Rad(lng1) - Rad(lng2);
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
                Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
        s = s *6378.137 ;// EARTH_RADIUS;
        s = Math.round(s * 10000) / 10000; //输出为公里
        //s=s.toFixed(4);
        return s;
    }

    var deviceCodeForMap=parent.Ext.getCmp('deviceCodeForMap').getValue();
    Ext.Ajax.request({
        method : "GET",
        url : "devices/getDeviceLocation?code="+deviceCodeForMap,
        success : function(response) {
            var data=Ext.decode(response.responseText).data


//            map.setZoom(zoom)

            var map;

            var mapOptions = {
                zoom: 18,
                center: new google.maps.LatLng(data.lat, data.lng),
//                zoom: 8,
//                center: new google.maps.LatLng(allLatitude/longitudeNumber,allLongitude/latitudeNumber)
            };
            map = new google.maps.Map(document.getElementById('allmap'),
                    mapOptions);



            function addCircle(lng,lat,id,text){
//                var image = 'resources/images/icons/marker_circle_google.png';
                var image = {
                    url: 'images/icons/marker_circle_google.png',
                    // This marker is 20 pixels wide by 32 pixels tall.
//                    size: new google.maps.Size(20, 32),
                    // The origin for this image is 0,0.
                    origin: new google.maps.Point(0,0),
                    // The anchor for this image is the base of the flagpole at 0,32.
                    anchor: new google.maps.Point(5, 5)
                };
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat,lng),
                    map: map,
                    icon: image,
                    title: text
                });
                var cityCircle;
                var populationOptions = {
                    strokeColor: '#0079FE',
                    strokeOpacity: 0.8,
                    strokeWeight: 1,
                    fillColor: '#B7E8F1',
                    fillOpacity: 0.3,
                    map: map,
                    center: new google.maps.LatLng(lat,lng),
                    radius: 1000
                };
                // Add the circle for this city to the map.
                cityCircle = new google.maps.Circle(populationOptions);


                google.maps.event.addListener(cityCircle, 'click', function() {
                    infowindow.open(map,marker);

                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);

                });



                var infowindow = new google.maps.InfoWindow({
                    content: "<nobr>"+text+"</nobr>"
                });



            }

            // 编写自定义函数,创建标注
            function addRedMarker(lng,lat,id,text){

                var image = 'images/icons/marker_red_google.png';
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat,lng),
                    map: map,
                    icon: image,
                    title: text
                });





            }

            function addBlueMarker(lng,lat,id,text){

                var image = 'images/icons/marker_blue_google.png';
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat,lng),
                    map: map,
                    icon: image,
                    title: text
                });





            }

//            for(var i=0;i<data.length;i++){
//                if(data[i].address.latitude!=''&&data[i].address.latitude!='null'&&data[i].address.latitude!=null){
//                    if(data[i].address.longitude!=''&&data[i].address.longitude!='null'&&data[i].address.longitude!=null){
//                        var lng=data[i].address.longitude
//                        var lat=data[i].address.latitude
//                        var id=data[i].id
//                        var storeName=data[i].name
//                        addCircle(lng,lat,id,storeName);
//                    }
//                }
//
//
//            }
//            alert(data)
            var myLatLng = {lat: data.lat, lng: data.lng};
            var marker = new google.maps.Marker({
                map: map,
                position: myLatLng,
                title: 'Device'
            });
//            addRedMarker(-34.397, 150.644,1,"Device");
//             随机向地图添加25个标注
//            var bounds = map.getBounds();
//            var sw = bounds.getSouthWest();
//            var ne = bounds.getNorthEast();
//            var lngSpan = Math.abs(sw.lng - ne.lng);
//            var latSpan = Math.abs(ne.lat - sw.lat);
//            for (var i = 0; i < 30; i ++) {
////                alert();
//                var lng=sw.lng + lngSpan * (Math.random() * 0.7)
//                var lat= ne.lat - latSpan * (Math.random() * 0.7)
//                if (i%2==0) {
//                    addRedMarker(lng,lat,i,"SA"+(i+1));
//                }else{
//                    addBlueMarker(lng,lat,i,"SA"+(i+1));
//                }
//
//            }




        }
    });


</script>